<template>
    <div class="eval-container">
        <ComHeader title="所有评论" leftArrow='true' />
        <div class="scroll-fixed">
            <!--scroll组件-->
            <scroll 
                ref="scroll"
                :data="aList"
                :pullup="isPullup"
                class="scroll"
                @scrollToEnd="fnDropGetList">
                <ul>
                    <li class="item" v-for="(item, index) in aList" :key="index">
                        <div class="item-info">
                            <span class="item-info__name">姓名：{{item.username}}</span>
                            <span class="item-info__time">日期：{{item.commentDate}}</span>
                        </div>
                        <div class="item-content">{{item.content}}</div>
                    </li>
                    <!--底部loading组件-->
                    <loading v-show="isHasMore" title=""></loading>
                    <p class="not-tit" v-if="aList.length && !isHasMore">————我是有底线的————</p>
                </ul>
            </scroll>
        </div>
        <!--没数据得情况-->
        <div class="not-data__box flex-display flex-display-column flex-center-pack flex-center-align" v-if="!isHasMore && !aList.length">
            <img src="../../../static/img/not-data.png"/>
            <span>抱歉！暂无相关评论</span>
        </div>
    </div>
</template>
<script>
// 导入scroll组件
import Scroll from '@/base/scroll/scroll'
// 引入api
import api from "@/fetch/api"
import ComHeader from '@/common/ComHeader'
import Loading from '@/base/loading/loading'
import axios from "axios";

export default {
    data() {
        return {
            page: 1,                // 当前请求的页码
            limit: 10,              // 每页显示多少条
            aList: [],              // 当前评论列表
            isHasMore: true,        // 是否有更多
            isPullup: true,         // 是否需要派发滚动结束事件 
            previous: null,         // 是否还有下一页
            star_level: 5,
        }
    },
    created() {
        // 获取评论接口
        this.getGoodsCommentData()
    },
    methods: {
        /**
         * @desc 滚动到底部事件获取数据
         */
        fnDropGetList() {
            if(this.previous) {
                this.page++
                this.getGoodsCommentData(true)
            }
        },
        // 获取评论列表 isLoading是否加载
        getGoodsCommentData(isLoading = false) {
            const params = {
                page: this.page,
                limit: this.limit,
                com_type:'all',
                goods_type: 'machine',
                machine_name: this.$route.query.title ? this.$route.query.title : '',
            };
            api.getGoodsVal(params)
                .catch(res => {
                    if(res.status === 200) {
                        this.isHasMore = false
                        if(!isLoading && this.$refs.suggest) {
                            this.$refs.suggest.scrollTo(0, 0)
                        }
                        this.aList = !isLoading ? res.data.results : [...this.aList, ...res.data.results]
                        this.isHasMore = res.data.next ? true : false
                        this.previous = res.data.next
                    }
                })
            }
    },
    components: {
        Scroll,
        ComHeader,
        Loading
    }
}
</script>
<style lang="stylus" scoped>
    .not-data__box{
        display flex;
        align-items center;
        justify-content center
        flex-direction:column;
        color #666;
        height 100%;
        >img{
            width 80%
            height auto
            margin-bottom 10px;
        }
    }
    .eval-container {
        position fixed;
        width 100%
        bottom 0
        top 0
        background #fff
        padding-top 10px
        .item {
            display flex
            height auto 
            padding 10px
            box-sizing border-box
            flex-direction column
            border-bottom 1px solid #e5e5e5
            .item-info {
                width 100%
                height 1rem
                display flex
                font-size 0.35rem
                justify-content center
                align-items center
                >span{
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    flex:1;
                    display: block;
                }
                .item-info__name {
                    display block
                    flex 1
                    
                }
                
            }
            .item-content {
                width 100%
                height auto
            }
        }
        .scroll-fixed{
            position: fixed;
            width: 100%;
            top: 54px;
            bottom: 0;
            border-top: 1px solid #e5e5e5
        }
        .not-tit{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align :center;
            color:#666;
            font-size:0.35rem;
        }
    }
</style>


